<template>
    <el-form-item>
        <el-button
            :type="item.prop === 'confirm' ? 'primary' : item.type || 'default'"
            :size="item.size | setSize(item.size)"
            :plain="item.plain"
            :round="item.round"
            :disabled="item.disabled"
            :circle="item.circle"
            :loading="item.loading"
            :icon="item.icon"
            :autofocus="item.autofocus"
            :class="item.class"
            @click="handelButtonClick"
        >
            {{ item.text }}
        </el-button>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-button',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 按钮类型
                     * @type String
                     * @value primary\success\info\warning\danger
                     */

                    type: 'primary',
                    /**
                     * 按钮操作类型
                     * @type String
                     * @value confirm\cancel\{any}
                     */

                    prop: 'confirm',
                    /**
                     * 按钮尺寸
                     * @type String
                     * @value medium / small / mini
                     */

                    size: 'medium',
                    /**
                     * 是否朴素按钮
                     * @type boolean
                     * @value false/true
                     */
                    plain: false,
                    /**
                     * 是否圆角按钮
                     * @type Bolean
                     * @value false/true
                     */
                    round: false,
                    /**
                     * 是否圆形按钮
                     * @type Bolean
                     * @value false/true
                     */
                    circle: false,
                    /**
                     * 是否加载中状态
                     * @type Bolean
                     * @value false/true
                     */
                    loading: false,
                    /**
                     * 是否禁用状态
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 图标类名
                     * @type string
                     * @value ''
                     */
                    icon: '',
                    /**
                     * 是否默认聚焦
                     * @type Bolean
                     * @value false/true
                     */
                    autofocus: false,
                    /**
                     * 自定义按钮类名
                     * @type string
                     * @value 'red'
                     */
                    class: ''
                }
            }
        }
    },
    methods: {
        /**
         * 按钮事件回抛
         */
        handelButtonClick() {
            this.dispatch('baseForm', 'onButtonClick', { prop: this.item.prop })
        }
    }
}
</script>
